<template>
    <div class="layout">
        <!-- 顶部导航栏 -->
        <el-container>
            <el-header>
                <h2>欢迎来到我的界面</h2>
                <el-button type="primary" @click="logout">退出</el-button>
            </el-header>
            <el-container>

                <!-- 左侧侧边栏 -->
                <el-col :span="4">
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose"
                        @select="handleMenuSelect">
                        <!-- 资源管理 -->
                        <el-sub-menu v-for="parent in datalist" :key="parent.id" :index="`parent-${parent.id}`">
                            <template #title>
                                <span>{{ parent.name }}</span>
                            </template>
                            
                            <el-menu-item v-for="child in parent.children" :key="child.id" :index="child.url">
                                {{ child.name }}
                            </el-menu-item>
                            
                        </el-sub-menu>
                    </el-menu>
                </el-col>

                <!-- 右侧子路由内容 -->
                <el-col :span="20" class="content-area">
                    <router-view />
                </el-col>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

import { useRouter,useRoute } from 'vue-router'
import http from '../http';
const route = useRoute()

// const datalist = route.query.menu || []

 
const topLevelItems = ref([])
const router = useRouter()
const datalist1 = localStorage.getItem('menu') || []
const datalist = JSON.parse(datalist1)
console.log(datalist)



// 处理菜单选择事件
const handleMenuSelect = index => {
    console.log('Menu selected:', index)
    // 跳转到对应路由
   
    router.push(index)
}

// 处理菜单打开事件
const handleOpen = (key, keyPath) => {
    console.log('Menu open:', key, keyPath)
    router.push('/index')

}

// 处理菜单关闭事件
const handleClose = (key, keyPath) => {
    console.log('Menu close:', key, keyPath)
    router.push('/index')
}



// 退出登录
const token = localStorage.getItem('token')
console.log(token)
const logout = () => {
    http.post('app/logout/',{'token':token}).then(res => {
        router.push('/')
        localStorage.removeItem('token')
    })
}


// 生命周期：组件挂载后执行数据加载
onMounted(() => {
   
    
})
</script>

<style scoped>
.layout {
    display: flex;
}

.content-area {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}
.el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
